<template>
  <div class="person_page">
    <div class="total">
      查询结果:{{ totalCount }}条
    </div>
    <div class="result_page">
      <div class="left_page">
        <div class="active_card_two">
          <div
            v-for="(t,i) in vehicleList"
            :key="i"
            class="v_card"
            :class="t.chosen ? 'chosen' : ''"
            @click="choseCard(t)"
          >
            <div class="imgC">
              <el-image :src="t.img" :preview-src-list="[t.img]" hide-on-click-modal style="width: 100%;height:100%;">
                <template #error>
                  <div class="imgV">
                    <SvgIcon font="-cheliang" :size="70" class="icon" />
                  </div>
                </template>
              </el-image>
              <div class="imgBt">
                <a @click="vehicleDetail(t)" style="cursor:pointer;color: #fff;">
                  查看详情
                </a>
              </div>
            </div>
            <div class="texts">
              <div class="textline">
                <SvgIcon font="chepaishibie" :size="20" class="icon_p" />
                <p>车牌号：</p>
                <span v-html="t.hphm || '未采集'" />
              </div>
              <div class="textline">
                <SvgIcon font="leixing" :size="20" class="icon_p" />
                <p>类型：</p>
                <span v-html="store.state.dictionaryMap.cllx[t.cllx ? t.cllx.substring(0,1) : ''] || '未采集'" />
              </div>
              <div class="textline">
                <SvgIcon font="sen103" :size="20" class="icon_p" />
                <p>颜色：</p>
                <span v-html="store.state.dictionaryMap.carColor[t.csys] || '未采集'" />
              </div>
              <div class="textline">
                <SvgIcon font="qichepinpai" :size="20" class="icon_p" />
                <p>品牌：</p>
                <span v-html="t.clpp1 || '未采集'" />
              </div>
              <div class="textline">
                <SvgIcon font="shenfenzheng" :size="20" class="icon_p" />
                <p>所属人：</p>
                <span v-html="t.syr || '未采集'" :title="t.syr || '未采集'" />
              </div>
              <div class="textline">
                <SvgIcon font="24gl-phoneLoudspeaker" :size="20" class="icon_p" />
                <p>联系方式：</p>
                <span v-html="t.sjhm || '未采集'" />
              </div>
            </div>
          </div>
        </div>
        <div class="mainpage">
          <el-pagination
            mini
            background
            layout="prev, pager, next, total"
            :total="page.totalElements"
            :page-size="page.size"
            :pager-count="5"
            :current-page="page.page"
            :page-sizes="[20]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin: 10px 0;"
          />
        </div>
      </div>
      <div class="right_page">
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 96%; margin: 0 2%;">
          <el-tab-pane label="关联轨迹" name="guiji">
            <div class="title">
              <div class="color" />
              <p>活动轨迹</p>
              <div class="total" style="margin-left: 20px;">
                累计出现:{{ ljcx }}次
              </div>
            </div>
            <div class="person_list" v-loading="guijiLoading">
              <div style="text-align: center;margin: 20px 0;" v-show="guijiData.length===0">
                暂无数据
              </div>
              <el-timeline>
                <el-timeline-item v-for="(t,i) in guijiData" :key="'guiji'+i" :timestamp="t.passTime" placement="top">
                  <el-card>
                    <div class="time_card">
                      <div class="info">
                        <h4>{{ '通行地点：' + (t.location || '未采集') }}</h4>
                        <p>{{ '设备类型：' + (dataSource[t.dbName] || '未采集') }}</p>
                        <p>{{ '行政区划：' + (t.areaName || '未采集') }}</p>
                      </div>
                      <div class="imgV">
                        <el-image :src="t.img" :preview-src-list="[t.img]" hide-on-click-modal style="width: 100%;height:100%;">
                          <template #error>
                            <div class="img">
                              <SvgIcon font="-cheliang" :size="70" class="icon" />
                            </div>
                          </template>
                        </el-image>
                      </div>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <div class="mainpage">
                <el-pagination
                  mini
                  background
                  layout="prev, pager, next, total"
                  :pager-count="5"
                  :total="gPage.totalElement"
                  :page-size="gPage.size"
                  :current-page="gPage.page"
                  :page-sizes="[5]"
                  @size-change="gHandleSizeChange"
                  @current-change="gHandleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="相关预警" name="warning">
            <div class="title">
              <div class="color" />
              <p>预警信息</p>
              <div class="total" style="margin-left: 20px;">
                累计预警:{{ ljyj }}次
              </div>
            </div>
            <div class="person_list" v-loading="warnLoading">
              <div style="text-align: center;margin: 20px 0;" v-show="warningData.length===0">
                暂无数据
              </div>
              <el-timeline>
                <el-timeline-item v-for="(t,i) in warningData" :key="'warning'+i" :timestamp="t.passTime" placement="top">
                  <el-card>
                    <div class="time_card" id="img-area">
                      <div class="info">
                        <h4>{{ '通行地点：' + (t.location || '未采集') }}</h4>
                        <p>{{ '预警原因：' + (t.reason || '未采集') }}</p>
                        <p>{{ '采取措施：' + (t.action || '未采集') }}</p>
                      </div>
                      <div class="imgV">
                        <el-image :src="t.img" :preview-src-list="[t.img]" hide-on-click-modal style="width: 100%;height:100%;">
                          <template #error>
                            <div class="img">
                              <SvgIcon font="-cheliang" :size="70" class="icon" />
                            </div>
                          </template>
                        </el-image>
                      </div>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <div class="mainpage">
                <el-pagination
                  mini
                  background
                  layout="prev, pager, next, total"
                  :pager-count="5"
                  :total="yPage.totalElement"
                  :page-size="yPage.size"
                  :current-page="yPage.page"
                  :page-sizes="[5]"
                  @size-change="yHandleSizeChange"
                  @current-change="yHandleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="相关人员" name="person">
            <div class="title">
              <div class="color" />
              <p>人员信息</p>
            </div>
            <div class="infos">
              <div class="base_row">
                <div>姓名</div>
                <div><p>{{ personInfo.xm || '未采集' }}</p></div>
              </div>
              <div class="base_row">
                <div>年龄</div>
                <div><p>{{ personInfo.age || '未采集' }}</p></div>
              </div>
              <div class="base_row">
                <div>民族</div>
                <div><p>{{ personInfo.mzmc || '未采集' }}</p></div>
              </div>
              <div class="base_row">
                <div>性别</div>
                <div><p>{{ personInfo.xbmc || '未采集' }}</p></div>
              </div>
              <div class="base_row">
                <div>身份证号</div>
                <div><p>{{ personInfo.gmsfhm || '未采集' }}</p></div>
              </div>
              <div class="base_row">
                <div>联系方式</div>
                <div><p>{{ personInfo.lxdh || '未采集' }}</p></div>
              </div>
            </div>
            <div class="title">
              <div class="color" />
              <p>人员轨迹</p>
            </div>
            <div class="person_list" v-loading="personLoading">
              <div style="text-align: center;margin: 20px 0;" v-show="personData.length===0">
                暂无数据
              </div>
              <el-timeline>
                <el-timeline-item v-for="(t,i) in personData" :key="'guiji'+i" :timestamp="t.passTime" placement="top">
                  <el-card>
                    <div class="time_card" id="img-area">
                      <div class="info">
                        <h4>{{ '通行地点：' + (t.location || '未采集') }}</h4>
                        <p>{{ '设备类型：' + (dataSource[t.dbName] || '未采集') }}</p>
                        <p>{{ '行政区划：' + (t.areaName || '未采集') }}</p>
                      </div>
                      <div class="imgP">
                        <el-image :src="t.img" :preview-src-list="[t.img]" hide-on-click-modal style="width: 100%;height:100%;">
                          <template #error>
                            <div class="img">
                              <SvgIcon font="renyuan-shi" :size="90" class="icon" />
                            </div>
                          </template>
                        </el-image>
                      </div>
                    </div>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
              <div class="mainpage">
                <el-pagination
                  mini
                  background
                  layout="prev, pager, next, total, sizes"
                  :pager-count="5"
                  :total="cPage.totalElement"
                  :page-size="cPage.size"
                  :current-page="cPage.page"
                  :page-sizes="[5]"
                  @size-change="cHandleSizeChange"
                  @current-change="cHandleCurrentChange"
                />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  cloudSearch,
  getPersonFileUpdates,
  queryEsPersonData,
  queryEsVehicleData,
  queryEsVehicleWarning
} from '@/api/retrieval'
import moment from 'moment'
import { useStore } from '@/store'

// 初始化数据
const store = useStore()
const initPersonDatas = () => ({
  totalCount: 0, // 总数量
  vehicleList: [] as any[],
  activeName: 'guiji',
  ljcx: 0,
  guijiData: [] as any[],
  guijiParams: {
    plateNum: '',
    startTime: '',
    endTime: '',
    page: 0,
    size: 5
  },
  ljyj: 0,
  warningData: [] as any[],
  warningParams: {
    page: 0,
    size: 5,
    startTime: '',
    endTime: '',
    plateNum: ''
  },
  personInfo: {} as any,
  personData: [] as any[],
  personParams: {
    page: 0,
    size: 3,
    startTime: '',
    endTime: '',
    idcard: ''
  },
  searchPost: {},
  CurrentCard: {} as any
})

// 页面初始化方法
const searchPost = ref(initPersonDatas().searchPost)
const init = (data: {}) => {
  searchPost.value = data
  // clearDatas()
  getSearchList()
}

const props = defineProps({
  moreSearchs: {
    type: Array,
    default: () => []
  }
})

// 开始搜索
const getSearchList = async () => {
  vehicleList.value = []
  totalCount.value = 0
  const params = JSON.parse(JSON.stringify(searchPost.value))
  params.lei_xing = 'che_liang_dang_an'
  params.page = page.page - 1
  params.size = page.size
  // 更多条件中循环获取参数
  Object.keys(searchPost.value).forEach(s => {
    props.moreSearchs.forEach((d:any) => {
      if (d.value === 'age') {
        params.startAge = d.model[0] || ''
        params.endAge = d.model[1] || ''
      }
      if (s === d.value && params.lei_xing === d.show) {
        params[s] = d.model
        if (d.keyword) {
          params[s] = d.keyword
        }
      }
    })
    if (Array.isArray(params[s])) {
      params[s] = params[s].join(',')
    }
  })
  const res = await cloudSearch(params)
  page.totalElements = res.totalElements
  totalCount.value = res.totalElements
  res.content.forEach((t: any) => {
    t.img = t.vehicle_img_url || t.recordimag
    vehicleList.value.push(t)
  })
  nextTick(() => {
    choseCard(vehicleList.value[0])
  })
}

// 左侧卡片列表参数
const totalCount = ref(initPersonDatas().totalCount)
const vehicleList = ref(initPersonDatas().vehicleList)

// 左侧 选中卡片方法
const CurrentCard = ref(initPersonDatas().CurrentCard)
const choseCard = (item: { chosen: boolean; }) => {
  vehicleList.value.forEach(t => {
    t.chosen = false
  })
  item.chosen = true
  CurrentCard.value = item
  initRight(item)
}

const guijiParams = ref(initPersonDatas().guijiParams)
const warningParams = ref(initPersonDatas().warningParams)
const personParams = ref(initPersonDatas().personParams)
const initRight = async (item: any) => {
  const t = JSON.parse(JSON.stringify(item))
  let res = {} as any
  let res1 = {} as any
  switch (activeName.value) {
    case 'guiji':
      guijiData.value = []
      guijiLoading.value = true
      ljcx.value = 0
      guijiParams.value.plateNum = t.hphm.replace(/<\/?[^>]*>/g, '').trim()
      guijiParams.value.startTime = moment().subtract(180, 'day').format('YYYY-MM-DD 00:00:00')
      guijiParams.value.endTime = moment().format('YYYY-MM-DD 23:59:59')
      guijiParams.value.page = gPage.page - 1
      guijiParams.value.size = gPage.size
      res = await queryEsVehicleData(guijiParams.value)
      gPage.totalElement = res.totalElements
      ljcx.value = res.totalElements
      guijiData.value = res.content
      guijiData.value.forEach(item => {
        item.img = item.vehicleImgUrl
      })
      guijiLoading.value = false
      break
    case 'warning':
      warnLoading.value = true
      warningData.value = []
      ljyj.value = 0
      warningParams.value.plateNum = t.hphm.replace(/<\/?[^>]*>/g, '').trim()
      warningParams.value.startTime = moment().subtract(180, 'day').format('YYYY-MM-DD 00:00:00')
      warningParams.value.endTime = moment().format('YYYY-MM-DD 23:59:59')
      warningParams.value.page = yPage.page - 1
      warningParams.value.size = yPage.size
      res = await queryEsVehicleWarning(warningParams.value)
      warningData.value = res.content
      yPage.totalElement = res.totalElements
      ljyj.value = res.totalElements
      warningData.value.forEach(item => {
        item.img = item.vehicleImgUrl
      })
      warnLoading.value = false
      break
    case 'person':
      personLoading.value = true
      personData.value = []
      personInfo.value = {}
      res = await getPersonFileUpdates({ keyword: t.sfzmhm.replace(/<\/?[^>]*>/g, '').trim() })
      if (res.code === 200) {
        personInfo.value = res.data
        const year = new Date().getFullYear()
        const birthyear = personInfo.value.gmsfhm.substring(6, 10)
        personInfo.value.age = year - birthyear
        personParams.value.idcard = personInfo.value.gmsfhm
        personParams.value.startTime = moment().subtract(180, 'day').format('YYYY-MM-DD 00:00:00')
        personParams.value.endTime = moment().format('YYYY-MM-DD 23:59:59')
        personParams.value.page = cPage.page - 1
        personParams.value.size = cPage.size
        res1 = await queryEsPersonData(personParams.value)
        personData.value = res1.content
        cPage.totalElement = res.totalElements
        personData.value.forEach(item => {
          item.img = item.personImgUrl
        })
        personLoading.value = false
      }
      break
    default:
      break
  }
}

// 查看详情
const router = useRouter()
const vehicleDetail = (data: { hphm: string; }) => {
  router.push({
    path: '/retrieval/toSearchPage',
    query: {
      data: data.hphm.replace(/<\/?[^>]*>/g, '').trim(),
      type: 'vehicle'
    }
  })
}

// 左侧卡片列表翻页
const page = reactive({
  page: 1,
  size: 20,
  totalElements: 20
})
const handleSizeChange = (size: number) => {
  page.page = 1
  page.size = size
  getSearchList()
}
const handleCurrentChange = (val: number) => {
  page.page = val
  getSearchList()
}

// 右侧关联tab页
const activeName = ref(initPersonDatas().activeName)
const handleClick = (tab: { props: { name: any; }; }) => {
  jumpToTab(tab.props.name)
}
const jumpToTab = (tab: string) => {
  activeName.value = tab
  initRight(CurrentCard.value)
}

// 关联轨迹相关参数
const ljcx = ref(initPersonDatas().ljcx)
const guijiLoading = ref(false)
const guijiData = ref(initPersonDatas().guijiData)
// 轨迹翻页
const gPage = reactive({
  page: 1,
  size: 5,
  totalElement: 20
})
const gHandleSizeChange = (size: number) => {
  gPage.page = 1
  gPage.size = size
  initRight(CurrentCard.value)
}
const gHandleCurrentChange = (val: number) => {
  gPage.page = val
  initRight(CurrentCard.value)
}

// 预警相关
const ljyj = ref(initPersonDatas().ljyj)
const warnLoading = ref(false)
const warningData = ref(initPersonDatas().warningData)
// const warningParams = ref(initPersonDatas().warningParams)
// 预警翻页
const yPage = reactive({
  page: 1,
  size: 5,
  totalElement: 20
})
const yHandleSizeChange = (size: number) => {
  yPage.page = 1
  yPage.size = size
  initRight(CurrentCard.value)
}
const yHandleCurrentChange = (val: number) => {
  yPage.page = val
  initRight(CurrentCard.value)
}

// 相关车辆
const personInfo = ref(initPersonDatas().personInfo)
const personLoading = ref(false)
const personData = ref(initPersonDatas().personData)
// 车辆翻页
const cPage = reactive({
  page: 1,
  size: 5,
  totalElement: 20
})
const cHandleSizeChange = (size: number) => {
  cPage.page = 1
  cPage.size = size
  initRight(CurrentCard.value)
}
const cHandleCurrentChange = (val: number) => {
  cPage.page = val
  initRight(CurrentCard.value)
}
// 数据源翻译
const dataSource = {
  jcz: '检查站感知系统',
  zakk: '治安卡口',
  jgkk: '交管卡口',
  qqkk: '全区卡口'
}
defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.person_page {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding-bottom: 1px;
  .total {
    // position: fixed;
    // right: 27%;
    // top: 23%;
    width: 120px;
    margin-left: 10px;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
  }
  .title {
    width: 100%;
    border-bottom: 1px solid #ccc;
    // background: #fff;
    line-height: 40px;
    display: flex;
    flex-flow: row nowrap;
    .color {
      background: rgb(0, 121, 254);
      width: 3px;
      height: 15px;
      margin: 12px 5px 0 5%;
    }
    > p {
      font-size: 16px;
      color: #999999;
      font-weight: 600;
    }
  }
  .result_page {
    width: 100%;
    margin: 0 0 20px 0;
    display: flex;
    flex-flow: row nowrap;
    .left_page {
      width: 70%;
      height: 100%;
      min-height: 600px;
      display: flex;
      flex-flow: column nowrap;
      margin-bottom: 20px;
      .active_card_two {
        width: 100%;
        margin: 0;
        flex: 1;
        overflow: auto;
        min-height: 200px;
        display: flex;
        flex-flow: row wrap;
        align-content: flex-start;
        &::-webkit-scrollbar {
          display: none;
        }
        .v_card {
          flex: 0 0 32%;
          width: 32%;
          height: 190px;
          margin: 10px 1% 10px 0;
          border-radius: 10px;
          display: flex;
          background: #1F2935;
          flex-flow: row nowrap;
          position: relative;
          overflow: hidden;
          .imgC {
            width: 100px;
            margin: 2px;
            margin-top: 20px;
            height: 112px;
            text-align: center;
            .imgV {
              width: 80px;
              height: 60px;
              margin: 20px auto 0;
              background: #8291A9;
              .icon {
                margin-left: 0;
                margin-top: -5px;
                color: #263959;
              }
            }
            .imgBt {
              text-align: center;
              margin-top: 17px;
              background: #0081FF;
              margin-left: 10px;
              width: 80px;
              height: 30px;
              line-height: 30px;
              border-radius: 4px;
            }
          }
          .texts {
            flex: 1;
            width: 75%;
            height: 100%;
            border-radius: 10px;
            background: var(--search-p-card-inner-bkg-color);
            display: flex;
            flex-flow: column nowrap;
            .textline {
              flex: 1;
              width: 100%;
              line-height: 25px;
              display: flex;
              flex-flow: row nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: 12px;
              .icon_p {
                color: #8291A9;
                margin-left: 10px;
              }
              img {
                width: 15px;
                height: 15px;
                align-self: center;
                margin-left: 20px;
              }
              p {
                color: var(--textline-text-color);
                margin-left: 5px;
                font-weight: 700;
                align-self: center;
              }
              span {
                overflow: hidden;
                color: var(--textline-text-color);
                text-overflow: ellipsis;
                white-space: nowrap;
                align-self: center;
              }
              &:first-child {
                margin-top: 10px;
              }
              &:last-child {
                margin-bottom: 10px;
              }
            }
          }
        }
        .chosen {
          border: 1px dashed #409eff;
        }
      }
      .mainpage {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
      }
    }
    .right_page {
      position: absolute;
      right: 0;
      width: 30%;
      height: auto;
      min-height: 650px;
      background: #1F2935;
      border-radius: 10px;
      .title {
        width: 100%;
        border-bottom: 0px solid #ccc;
        // background: #fff;
        line-height: 40px;
        display: flex;
        flex-flow: row nowrap;
        position: relative;
        .color {
          background: rgb(0, 121, 254);
          width: 3px;
          height: 15px;
          margin: 12px 5px 0 2%;
        }
        > p {
          font-size: 12px;
          color: #fff;
          font-weight: 600;
        }
        .total {
          position: absolute;
          width: 150px;
          height: 30px;
          right: 10px;
          font-size: 10px;
          text-align: right;
        }
      }
      .person_list {
        width: 100%;
        display: flex;
        flex-flow: column nowrap;
        .person_card {
          width: 98%;
          margin: 5px;
          height: 82px;
          background: #161D26;
          border: 1px solid #8291A940;
          display: flex;
          flex-flow: row nowrap;
          .left_card {
            width: 20%;
            height: 100%;
            img {
              width: 60px;
              height: 80px;
              margin-left: 20px;
              text-align: center;
            }
          }
          .right_card {
            width: 80%;
            height: 100%;
            // margin-left: 20px;
            display: flex;
            flex-flow: column nowrap;
            > div {
              height: 20px;
              line-height: 20px;
              margin-left: 20px;
              display: flex;
              flex-flow: row nowrap;
              > p {
                color: #fff;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &:first-child {
                  font-weight: 700;
                }
                &:nth-child(2) {
                  margin-left: 15px;
                }
              }
            }
          }
        }
        .time_card {
          display: flex;
          .info {
            flex: 0 0 80%;
          }
          .imgV {
            width: 80px;
            height: 60px;
            .img {
              width: 80px;
              height: 60px;
              background: #8291A9;
              .icon {
                margin-left: 5px;
                margin-top: -5px;
                color: #263959;
              }
            }
          }
          .imgP {
            width: 50px;
            height: 70px;
            .img {
              width: 50px;
              height: 70px;
              background: #8291A9;
              .icon {
                margin-left: -20px;
                margin-top: -8px;
                color: #263959;
              }
            }
          }
        }
      }
      .imgCompare {
        width: 98%;
        margin: 10px 5px;
        height: 200px;
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        .left_img {
          width: 49%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .sim {
          width: 50px;
          height: 50px;
          position: absolute;
          background: yellow;
          color: #000;
          border-radius: 25px;
          text-align: center;
          line-height: 50px;
          top: 38%;
          left: 43%;
          z-index: 9999;
        }
        .right_img {
          width: 49%;
          height: 100%;
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .infos {
        width: 98%;
        .base_row {
          width: 100%;
          height: 30px;
          display: flex;
          flex-flow: row nowrap;
          div {
            height: 100%;
            color: #fff;
            font-size: 12px;
            line-height: 30px;
          }
          div:nth-child(2n-1) {
            width: 30%;
            background: #8291A940;
            border-bottom: 2px solid #161D26;
            text-align: center;
            font-weight: 700;
            &:last-child {
              border-bottom: 0;
            }
          }
          div:nth-child(2n) {
            width: 70%;
            text-align: left;
            border: 1px solid #8291A940;
            p {
              margin-left: 20px;
            }
          }
        }
        div:nth-last-child(n + 2) {
          border-bottom: 0px;
        }
      }
      .mainpage {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>

<style lang="scss">
html.dark .person_page {
  --person-total-color: #fff;
  --search-p-card-bkg-color: #1F2935;
  --search-p-card-inner-bkg-color: #8291A91a;
  --search-p-card-photo-icon: #263959;
  --textline-text-color: #8291A9;
}
html.light .person_page {
  --person-total-color: #000;
  --search-p-card-bkg-color: #FFFFFF;
  --search-p-card-inner-bkg-color: #EDF4FB;
  --search-p-card-photo-icon: #DBE7EE;
  --textline-text-color: #606266;
}
</style>
